<script setup lang="ts">
import useMicroStore from '@apps/_share/store/micro'
import { ElForm } from 'element-plus'
import AppDialog from './app-dialog.vue'

const { $t } = useMicroStore()

const appDialogVisible = ref(false)

const visible = defineModel('visible', { default: false })
const item = defineModel('item') as any

function onAdd() {
  appDialogVisible.value = true
}
</script>

<template>
  <ElDrawer
    v-model="visible"
    title="编辑"
    direction="rtl"
    size="50%"
  >
    <ElForm
      :model="item"
      label-width="auto"
    >
      <ElFormItem :label="$t('项目名:')">
        <ElInput v-model="item.projectName" />
      </ElFormItem>

      <ElFormItem label="项目code:">
        <ElInput
          v-model="item.projectCode"
          disabled
        />
      </ElFormItem>

      <ElFormItem label="状态:">
        <ElSwitch
          v-model="item.status"
          width="60"
          inline-prompt
          active-text="开启"
          inactive-text="关闭"
          :active-value="1"
          :inactive-value="0"
        />
      </ElFormItem>

      <!-- <ElFormItem label="域名:">
        <ElForm
          label-width="auto"
          class="w-full"
        >
          <ElFormItem
            v-for="domain in item.domains"
            :key="domain.env"
            :label="domain.envName"
          >
            <ElInput
              v-model="domain.url"
              class="w-full"
            />
          </ElFormItem>
        </ElForm>
      </ElFormItem> -->

      <ElFormItem label="关联的应用:">
        <div>
          <ElButton
            class="block"
            size="small"
            type="primary"
            @click="onAdd()"
          >
            新增
          </ElButton>

          <ElSpace
            wrap
            class="mt-12px"
          >
            <ElCard
              v-for="app in item.apps"
              :key="app.id"
            >
              <span>{{ app.name }}</span>
            </ElCard>
          </ElSpace>
        </div>
      </ElFormItem>
    </ElForm>

    <AppDialog v-model:visible="appDialogVisible" />
  </ElDrawer>
</template>

<style lang="less" scoped>
:deep(.el-form-item .el-form-item) {
  margin-bottom: 16px;
}
</style>
